<template>
  <div>
    <ul>
      <li
        v-for="p in all"
        :key="p.id"
      >
        {{p.name}} - {{p.price}}
        <button :disabled="isOutsaled(p.id)" @click="addProductToCart(p)">放入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState('product', ['all']),
    ...mapGetters('product', ['isOutsaled'])
  },

  methods: {
    ...mapActions('product', ['loadData']),
    ...mapActions('cart', ['addProductToCart'])
  },

  mounted() {
    // this.$store.dispatch('product/loadData')
    this.loadData()
  },
}
</script>

<style lang='stylus' scoped>

</style>